<template>
  <j-modal title="逾期报到申请" :width="600" :visible="visible" :confirmLoading="loading" switchFullscreen
    @cancel="handleCancel" @ok="handleOk">
      
    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">

      <a-form-model-item label="姓名：">
        <div>{{ recorddata.name }}</div>
      </a-form-model-item>
      <a-form-model-item label="户籍地详址：">
        <div>{{ recorddata.address }}</div>
      </a-form-model-item>
      <a-form-model-item label="原报到截止时间：">
        <div>{{ recorddata.reportToTime }}</div>
      </a-form-model-item>
    
      <a-form-model-item label="新报到截止时间" >
        <a-date-picker
          v-model="form.newreportToTime"
          show-time
          type="date"
          placeholder="请选择"
          style="width: 100%;"
        />
      </a-form-model-item>
      
      <a-form-model-item label="上传文件">
            <j-upload v-model="form.file"></j-upload>
            <p>支持扩展名：.rar .zip .doc .docx .pdf .jpg...</p>
      </a-form-model-item>


      <a-form-model-item label="情况说明">
        <a-input v-model="form.text" type="textarea" placeholder="最多输入500字"/>
      </a-form-model-item>

  </a-form-model>

  </j-modal>
</template>

<script>
  
  import {overdueAndUnreported} from '@/api/sjsk/reportList.js'
  export default {
    // name: 'AddModal',
    data() {
      return {
        visible: false,
        // managementdata: {},
        loading: false, 
        recorddata:{},

        labelCol: { span: 5 },
        wrapperCol: { span: 14 },
        form: {},
      }
    },
    async created() {
    },
    methods: {
      show(record) {
        this.visible = true
        this.recorddata = record
      },
      Overridereport() {
        let {address,name,reportToTime,id} = this.recorddata
        let quary = {
          address:address,
          name:name,
          deadOriginalReport:reportToTime,
          deadNewReport:this.timestampToTime2(),
          descOverdueReport:this.form.text,
          overdueReportDoc:this.form.file,
          personId:id,
        }
        // console.log(this.timestampToTime2());
        overdueAndUnreported(quary).then(res => {
          if (res.success) {
            this.$message.success('逾期报到申请'+res.message)
          }
          else {
              this.loading = false
              this.$message.warn(res.message)
            }
        }).catch(e => {
              this.loading = false
              this.$message.warn('请求失败！')
            })
      },
      handleCancel() {
        this.visible = false
        this.form = {}
      },
      handleOk() {
        this.visible = false
        this.Overridereport()
        this.form = {}
        // console.log(new Date(this.form.newreportToTime));
        // console.log(this.form);
      },
      // 将新报到截止时间转化为正确的格式
      timestampToTime2() {
          var date = new Date(Date.parse(this.form.newreportToTime))
          var Y = date.getFullYear() + '-'
          var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
          var D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
          var H = date.getHours() + ':'
          var M2 = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
          var S = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
          return Y + M + D + H + M2 + S
      }
    },
  }
  </script>
  <style lang="less" scoped>
  .pt {
    font-weight: bold;
  }
  
  .pl {
    padding-top: 20px;
    border-top: 1px dotted #ccc;
  }
  
  .ant-row {
    margin-left: 10px;
  }
  
  .item1 {
    width: 100%;
    position: relative;
    left: -2%;
  
    /deep/.ant-col-6 {
      width: 10.5%;
      // text-align: left;
    }
  
    /deep/.ant-col-16 {
      width: 70%;
      text-align: left;
    }
  }
  
  .item2 {
    margin-left: 115px;
    margin-bottom: 20px;
  
    p {
      display: inline-block;
    }
  
    .box {
      display: inline-block;
      margin-left: 90px;
      margin-right: 20px;
    }
  }
  </style>